import React, { Component } from 'react'

//创建context对象
const MyContext = React.createContext()

export default class Demo extends Component {
    state = {
        username: "Tom",
        age: 18
    }
    render() {
        const { username, age } = this.state
        return (
            <div>
                {this.state.username}
                {/* 提供给后代组件value,只适用于类式组件 */}
                <MyContext.Provider value={{ username, age }}>
                    <A />
                </MyContext.Provider>
            </div>
        )
    }
}

class A extends Component {
    render() {
        return (
            <div>
                a <B />
            </div>
        )
    }
}
class B extends Component {
    render() {
        return (
            <div>
                b <C />
            </div>
        )
    }
}
// class C extends Component {
//     // 声明接受
//     static contextType = MyContext
//     render() {
//         return (
//             <div>
//                 c {this.context.age}
//             </div>
//         )
//     }
// }

function C() {
    return (
        <div>
            c
            <MyContext.Consumer>
                {value => {
                    return `${value.age}`
                }}
            </MyContext.Consumer>
        </div>
    )
}
